<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>对话框示例</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../lib/sui/sm.min.css">
    <link rel="stylesheet" href="../lib/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/public_main.css">
</head>

<body>
    <div class="page-group">
        <div class="page page-current" id="modal">
            <div class="content">
                <!-- 主内容 -->
                <div class="content-block">
                    <p>弹框</p>
                    <p><a href="#" class="alert-text">Alert With Text</a></p>
                    <p><a href="#" class="alert-text-title">Alert With Text and Title</a></p>
                    <p><a href="#" class="alert-text-title-callback">Alert With Text and Title and Callback</a></p>
                    <p><a href="#" class="alert-text-callback">Alert With Text and Callback</a></p>
                </div>
                <div class="content-block">
                    <p>对话框</p>
                    <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
                    <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
                    <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
                    <p><a href="#" class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p>
                </div>
                <div class="content-block">
                    <p>prompt 输入</p>
                    <p><a href="#" class="prompt-ok">Prompt with text and Ok callback</a></p>
                    <p><a href="#" class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p>
                    <p><a href="#" class="prompt-title-ok">Prompt with text, title and Ok callback</a></p>
                    <p><a href="#" class="prompt-title-ok-cancel">Prompt with text, title, Ok and Cancel callback</a></p>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='../lib/sui/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../lib/sui/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../lib/sui/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src="../lib/vue/vue.min.js"></script>
    <script>
        //弹框
        $(document).on('click', '.alert-text', function () {
            $.alert('Here goes alert text');
        });
        $(document).on('click', '.alert-text', function () {
            $.alert('Here goes alert text');
        });
        $(document).on('click', '.alert-text-title', function () {
            $.alert('Here goes alert text', 'Custom Title!');
        });
        $(document).on('click', '.alert-text-title-callback', function () {
            $.alert('Here goes alert text', 'Custom Title!', function () {
                $.alert('Button clicked!')
            });
        });
        $(document).on('click', '.alert-text-callback', function () {
            $.alert('Here goes alert text', function () {
                $.alert('Button clicked!')
            });
        });
        //对话框
        $(document).on('click', '.confirm-ok', function () {
            $.confirm('Are you sure?', function () {
                $.alert('You clicked Ok button');
            });
        });

        $(document).on('click', '.confirm-ok-cancel', function () {
            $.confirm('Are you sure?',
                function () {
                    $.alert('You clicked Ok button');
                },
                function () {
                    $.alert('You clicked Cancel button');
                }
            );
        });
        $(document).on('click', '.confirm-title-ok', function () {
            $.confirm('Are you sure?', 'Custom Title', function () {
                $.alert('You clicked Ok button');
            });
        });
        $(document).on('click', '.confirm-title-ok-cancel', function () {
            $.confirm('Are you sure?', 'Custom Title',
                function () {
                    $.alert('You clicked Ok button');
                },
                function () {
                    $.alert('You clicked Cancel button');
                }
            );
        });
        // prompt 输入
        $(document).on('click', '.prompt-ok', function () {
            $.prompt('What is your name?', function (value) {
                $.alert('Your name is "' + value + '". You clicked Ok button');
            });
        });

        $(document).on('click', '.prompt-ok-cancel', function () {
            $.prompt('What is your name?',
                function (value) {
                    $.alert('Your name is "' + value + '". You clicked Ok button');
                },
                function (value) {
                    $.alert('Your name is "' + value + '". You clicked Cancel button');
                }
            );
        });
        $(document).on('click', '.prompt-title-ok', function () {
            $.prompt('What is your name?', 'Custom Title', function (value) {
                $.alert('Your name is "' + value + '". You clicked Ok button');
            });
        });
        $(document).on('click', '.prompt-title-ok-cancel', function () {
            $.prompt('What is your name?', 'Custom Title',
                function (value) {
                    $.alert('Your name is "' + value + '". You clicked Ok button');
                },
                function (value) {
                    $.alert('Your name is "' + value + '". You clicked Cancel button');
                }
            );
        });
        var vm = new Vue({
            el: '#modal',
            data: {
                phone: "18638779089",
                password: "123478",
                encode: true,
            },
            methods: {
                mounted() {

                },
            },
        })
    </script>
</body>

</html>